<template>
  <div style="position: absolute;top: 0px;left:0px;width: 100%" >
<!--      <el-menu-->
<!--        :default-active="activeIndex2"-->
<!--        mode="horizontal"-->
<!--        @select="handleSelect"-->
<!--        background-color="#545c64"-->
<!--        text-color="#fff"-->
<!--        active-text-color="#ffd04b">-->
<!--        <template v-for="items in rmenu">-->
<!--          <el-submenu :index="items.path">-->
<!--            <template slot="title">{{ items.meta.title }}</template>-->

<!--              <router-link v-for="child in items.children" :to="items.path+'/'+child.path" v-if="!child.hidden" :key="this">-->
<!--                <el-menu-item :index="items.path+'/'+child.path">{{ child.meta.title }}</el-menu-item>-->
<!--              </router-link>-->

<!--          </el-submenu>-->
<!--        </template>-->
<!--      </el-menu>-->

    <el-menu
      :default-active="onRouter"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <template v-for="items in menuList">
        <el-submenu :index="items.path">
          <template slot="title">{{ items.meta.title }}</template>

          <router-link v-for="child in items.children" :to="items.path+'/'+child.path" v-if="!child.hidden" :key="this">
            <el-menu-item :index="items.path+'/'+child.path">{{ child.meta.title }}</el-menu-item>
          </router-link>

        </el-submenu>
      </template>
    </el-menu>

    <!--引入路由页面-->
    <el-main style="background-color: #f5f5f5">
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "TopMenuBar",

  computed: {
    // 首次进入页面时展开当前页面所属的菜单
    onRouter(){
      const route = this.$route;
      console.log(route)
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path;
    }
  },

  created() {

    // console.log(this.$router.menuList)

    this.menuList = this.$router.menuList
    // 模拟动态列表
    // this.rmenu = [{
    //   path:"/top",
    //   meta: {
    //     title: 'parent1',
    //     noCache: true
    //   },
    //   children:[
    //     {
    //       path:"login",
    //       meta: {
    //         title: 'children1',
    //         noCache: true
    //       },
    //     },
    //     {
    //       path:"children2",
    //       meta: {
    //         title: 'children2',
    //         noCache: true
    //       },
    //     },
    //   ]
    // },
    //   {
    //     path:"/parent2",
    //     meta: {
    //       title: 'parent2',
    //       noCache: true
    //     },
    //     children:[
    //       {
    //         path:"children1",
    //         meta: {
    //           title: 'children1',
    //           noCache: true
    //         },
    //       },
    //       {
    //         path:"children2",
    //         meta: {
    //           title: 'children2',
    //           noCache: true
    //         },
    //       },
    //     ]
    //   }]

    // this.$router.menuList = this.rmenu
    // console.log(this.$router)

  },

  data() {
    return {
      activeIndex2: '1',
      rmenu:null,
      menuList:null
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>

</style>
